﻿
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>数据展示</title>
    <link href="~/layui-v2.4.5/layui/css/layui.css" rel="stylesheet" />
    <script src="~/layui-v2.4.5/layui/layui.js"></script>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
</head>
<body>


    <!--数据编辑-->
    <div id="updateAndAddUrl" class="layui-form" style="display:none">
        <input id="UrlId" type="hidden" value="0" />
        <div class="layui-form-item">
            <label class="layui-form-label">名称：</label>
            <div class="layui-input-inline">
                <input id="UrlName" autocomplete="off" class=" layui-input" type="text" />
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">地址：</label>
            <div class="layui-input-inline">
                <input id="UrlAddress" autocomplete="off" class=" layui-input" type="text" />
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">简介：</label>
            <div class="layui-input-block">
                <input id="UrlContent" autocomplete="off" class=" layui-input" type="text" />
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">类型：</label>
            <div class="layui-input-inline">
                <select id="UrlType" lay-search="" name="addUrlType">
                    @foreach (var item in ViewBag.UrlTypeList)
                    {
                        <option value="@item.TypeId">@item.TypeName</option>
                    }
                </select>
            </div>
        </div>

        <div class="layui-btn-group layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline">
                <button id="btn_AddAndUpd" class="layui-btn" type="button"><i class="layui-icon">&#xe654;</i>保存</button>
            </div>
        </div>
    </div>

    <header class="layui-form" style="padding-top:1%">
        <div class="layui-inline">
            <label class="layui-form-label">URL类型：</label>
            <div class="layui-input-inline">
                <select id="seach_UrlType" lay-search="" name="seach_UrlType" lay-filter="seach_UrlType">
                    <option value="0">全部</option>
                    @foreach (var item in ViewBag.UrlTypeList)
                    {
                        <option value="@item.TypeId">@item.TypeName</option>
                    }
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input id="seach_UrlLike" autocomplete="off" class=" layui-input" type="text" placeholder="名称、地址、简介模糊查询" />
            </div>
        </div>
        <div class="layui-inline layui-btn-group">
            <div class="layui-input-inline">
                <button id="btn_Add" class="layui-btn" type="button"><i class="layui-icon">&#xe654;</i>添加</button>
                <button id="showReportUrlType" class="layui-btn" type="button"><i class="layui-icon">&#xe629;</i>查看URL类型</button>
            </div>
        </div>
    </header>

    <div id="divUrlList" class="layui-row" style="padding-left:1%">
        <div class="layui-col-xs6 layui-col-md12">
            <div class="grid-demo grid-demo-bg2">
                <table class="layui-hide" id="tableUrlList" lay-filter="tableUrlList"></table>
            </div>
        </div>
    </div>

    <script type="text/html" id="caozuo">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="del">删除</a>
    </script>
</body>
</html>


<script>
    //实例化方法
    layui.use(['table', 'layer', 'form', 'laydate', 'upload'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        form.render();
        //$(".btn-seach").click(function () {
        //    table.reload('tableTCustomer', {
        //        where: {
        //            seach_Customer: $("#seach_Customer").val(),
        //            seach_FactoryId: $("#seach_FactoryId").val(),
        //        }
        //    })
        //})

        //执行一个 table 实例
        table.render({
            elem: '#tableUrlList',
            url: '/Url/GetUrlList',
            where: {
                seach_TypeId: $("#seach_UrlType").val(),
                seach_UrlLike: $("#seach_UrlLike").val(),
            },
            method: 'post',
            height: 1000,
            width: 995,
            //limit: 20,
            page: true,
            cols: [[
                { field: 'RowNum', width: 80, sort: true, fixed: 'left', title: '序号' },
                { field: 'UrlName', width: 110, title: '名称' },
                {
                    field: '', width: 180, title: '地址', templet: function (d) {
                        return "<a href=" + d.UrlAddress + " target=_blank>" + d.UrlAddress + "</a>"
                    }
                },
                { field: 'UrlContent', width: 200, title: '简介' },
                { field: 'TypeName', width: 110, title: '类型' },
                { field: 'UrlCreateTimeStr', width: 175, title: '创建时间' },
                { fixed: 'right', width: 120, align: 'left', toolbar: '#caozuo', title: '操作' },
            ]]
        });

        //右侧工具栏事件
        table.on('tool(tableUrlList)', function (obj) {
            //获取当前行的数据
            var data = obj.data;
            //序列化成json
            //var result = JSON.stringify(data);
            //判断 lay-event 中的值是否匹配
            if (obj.event === 'del') {
                layer.confirm('确定要删除吗？', { skin: 'layui-layer-molv', closeBtn: 1, icon: 3, anim: 4 }, function () {
                    $.ajax({
                        type: "post",
                        url: "/Url/DelUrlAndTypeById",
                        data: {
                            UrlId: data.UrlId,
                        },
                        success: function (result) {
                            if (result.Code == 1) {
                                layer.msg("删除成功", { icon: 6 })
                                //obj.del();
                            } else {
                                layer.alert("删除失败，提示：" + result.Msg, { icon: 2 })
                            }
                            layui.use('table', function () {
                                var table = layui.table;
                                table.reload('tableUrlList', {
                                    where: {
                                        seach_TypeId: $("#seach_UrlType").val(),
                                        seach_UrlLike: $("#seach_UrlLike").val(),
                                    },
                                    url: '/Url/GetUrlList',
                                })
                            })
                        },
                        error: function (falus) {
                            layer.msg("删除失败，错误提示" + falus)
                        }
                    })
                });
            } else if (obj.event === 'edit') {
                layer.open({
                    type: 1,
                    area: ['30%', '45%'],
                    title: '修改数据：',
                    shade: 0.6,
                    maxmin: true,
                    anim: 1,
                    content: $("#updateAndAddUrl"),
                    end: function () {
                        $("#UrlName").val('');
                        $("#UrlAddress").val('');
                        $("#UrlContent").val('');
                        $("#UrlId").val(0);
                    }
                });

                $("#UrlId").val(data.UrlId);
                $("#UrlName").val(data.UrlName);
                $("#UrlAddress").val(data.UrlAddress);
                $("#UrlContent").val(data.UrlContent);
                $("#UrlType option[value = " + data.UrlType + "]").attr("selected", true);
                form.render();
            }
        })

        //监听行单击事件
        //table.on('row(tableUrlList)', function (obj) {
        //    //  console.log(obj.tr) //得到当前行元素对象
        //    //    console.log(obj.data) //得到当前行数据
        //    //obj.del(); //删除当前行
        //    //obj.update(fields) //修改当前行数据
        //});

        //url下拉框事件
        form.on('select(seach_UrlType)', function () {
            var seach_UrlType = $("#seach_UrlType").val();
            var seach_UrlLike = $("#seach_UrlLike").val();
            //$.ajax({
            //    type: 'POST',
            //    url: '/Url/GetUrlList',
            //    data: {
            //        seach_TypeId: seach_UrlType,
            //        seach_UrlLike: seach_UrlLike
            //    },
            //    //      dataType: 'json',
            //    success: function (data) {
            layui.use('table', function () {
                var table = layui.table;
                table.reload('tableUrlList', {
                    where: {
                        seach_TypeId: seach_UrlType,
                        seach_UrlLike: seach_UrlLike
                    },
                    //url: '/Url/GetUrlList',
                })
            })
            //    }
            //})
        });

    })
    //保存
    $("#btn_AddAndUpd").click(function () {
        var UrlName = $("#UrlName").val(),
            UrlAddress = $("#UrlAddress").val(),
            UrlId = $("#UrlId").val(),
            UrlContent = $("#UrlContent").val(),
            UrlType = $("#UrlType").val();
        if (UrlName == '') {
            layer.tips('名称不可为空！！！', '#UrlName', { tips: [1, '#3595CC'], time: 2000 });
        } else if (UrlAddress == '') {
            layer.tips('地址不可为空！！！', '#UrlAddress', { tips: [1, '#3595CC'], time: 2000 });
        }
        else if (UrlContent == '') {
            layer.tips('简介不可为空！！！', '#UrlContent', { tips: [1, '#3595CC'], time: 2000 });
        } else {
            $.ajax({
                type: "post",
                data: {
                    UrlName: UrlName,
                    UrlAddress: UrlAddress,
                    UrlContent: UrlContent,
                    UrlType: UrlType,
                    UrlId: UrlId
                },
                url: "/Url/AddAndUpdate",
                success: function (result) {
                    if (result.Code == 1) {
                        layer.msg("保存成功", { icon: 1 });
                        $("#UrlName").val('');
                        $("#UrlAddress").val('');
                        $("#UrlContent").val('');
                        $("#UrlId").val(0);
                    }
                    else if (result.Code == 2) {
                        layer.alert("数据保存失败，提示：该数据已存在不可重复创建", { icon: 2 });
                    }
                    else {
                        layer.alert("数据保存失败，提示：" + result.Msg, { icon: 2 });
                    }
                    layui.use('table', function () {
                        var table = layui.table;
                        table.reload('tableUrlList', {
                            where: {
                                seach_TypeId: $("#seach_UrlType").val(),
                                seach_UrlLike: $("#seach_UrlLike").val(),
                            },
                            url: '/Url/GetUrlList',
                        })
                    })
                    layer.closeAll('page');
                }
            })
        }
    })
    //添加
    $("#btn_Add").click(function () {
        layer.open({
            type: 1,
            area: ['30%', '50%'],
            title: '数据操作：',
            shade: 0.6,
            maxmin: true,
            anim: 1,
            content: $("#updateAndAddUrl"),
            end: function () {
                $("#UrlName").val('');
                $("#UrlAddress").val('');
                $("#UrlContent").val('');
                $("#UrlId").val(0);
            }
        });

        layui.use('form', function () {
            var form = layui.form
            form.render();
        })
    })

    //搜索文本框的键盘抬起事件
    $("#seach_UrlLike").keyup(function () {
        if (event.keyCode == 13) {
            layui.use('table', function () {
                var table = layui.table;
                table.reload('tableUrlList', {
                    where: {
                        seach_TypeId: $("#seach_UrlType").val(),
                        seach_UrlLike: $("#seach_UrlLike").val(),
                    },
                    url: '/Url/GetUrlList',
                })
            })
        }
    })


    $("#showReportUrlType").click(function () {
        layer.open({
            type: 2,
            area: ['40%', '50%'],
            title: 'URL类型：',
            shade: 0.6,
            maxmin: true,
            anim: 2,
            content: '/Url/ReportUrlTypeList',
            end: function () {
                location.reload()
            }
        });
    })


</script>